<template>
	<view>
		<navbar title="分销中心" :autoBack="true"></navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con">
				<view class="con__topbox">
					<image src="/static/daikuan/qr.png" class="con__topbox__qrcode" mode=""></image>
					<view class="u-flex u-flex-xy-center">
						<view class="con__topbox__ti">
							邀请码:
						</view>
						<view class="con__topbox__code" style="margin-top: 8rpx;">
							{{salt}}
						</view>
						<image src="/static/daikuan/fz.png" class="con__topbox__fz" mode="" @click="copy(salt)"></image>
					</view>
					<view class="con__topbox__btn">
						邀请好友
					</view>
				</view>
				<view class="con__box">
					<view class="con__box__top">
						<view class="u-flex u-flex-y-center">
							<view class="con__box__top__line">

							</view>
							<view class="con__box__top__ti">
								我的团队
							</view>
						</view>
						<view class="u-flex u-flex-y-center" @click="navto('/pages/personal/income')">
							<image src="/static/daikuan/qian.png" class="con__box__top__icon" mode=""></image>
							<view class="con__box__top__tip">
								收益明细
							</view>
						</view>
					</view>
					<view class="con__box__tabs">
						<view class="con__box__tabs__item" @click="curindex=index,getteam(item.type)"
							v-for="(item,index) in tablist" :key="index" :class="curindex==index?'active':''">
							{{item.name}}({{index==0?childCount:grandSonCount}})
						</view>
					</view>
					<view class="con__box__list" v-if="teamlist.length>0">
						<view class="con__box__list__item" v-for="(item,index) in teamlist" :key="index">
							<image :src="URL(item.avatar)" class="con__box__list__item__tx" mode=""></image>
							<view class="" style="flex: 1;">
								<view class="con__box__list__item__name">
									{{item.username}}
								</view>
								<view class="con__box__list__item__time">
									<!-- 2024.06.12 12:26 -->
									{{$u.timeFormat(item.createtime, 'yyyy.mm.dd hh:MM')}}
								</view>
							</view>
							<view class="con__box__list__item__price">
								<image src="/static/daikuan/jia.png" class="con__box__list__item__price__icon" mode="">
								</image> {{item.money}}
							</view>
						</view>
					</view>
					<u-empty mode="list" v-else>
					</u-empty>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		data
	} from '../../uni_modules/uview-ui/libs/mixin/mixin';
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				tablist: [{
						name: '一级团队',
						type: 1
					},
					{
						name: '二级团队',
						type: 2
					},
				],
				curindex: 0,
				childCount: 0,
				grandSonCount: 0,
				salt: '',
				teamlist: []
			};
		},
		methods: {
			async getteam(type) {
				let res = await user.myTeam({
					type
				})
				if (res.data.code == 1) {
					this.childCount = res.data.data.childCount
					this.grandSonCount = res.data.data.grandSonCount
					// console.log(res.data)
					this.teamlist = res.data.data.result
				}
			}
		},
		onLoad() {
			this.getteam(1)
			this.salt = uni.getStorageSync('dkuserinfo').salt
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		padding: 20rpx 30rpx;
		position: relative;

		&__topbox {
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 55rpx 0 38rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;

			&__qrcode {
				width: 377rpx;
				height: 379rpx;
			}

			&__ti {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				line-height: 100rpx;
			}

			&__code {
				font-family: DIN Next LT Pro;
				font-weight: 500;
				font-size: 40rpx;
				color: #000000;
				line-height: 100rpx;
			}

			&__fz {
				width: 24rpx;
				height: 29rpx;
				margin-left: 8rpx;
			}

			&__btn {
				width: 423rpx;
				height: 94rpx;
				background: #3262FD;
				border-radius: 15rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 94rpx;
				text-align: center;
			}
		}

		&__box {
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 0 30rpx;

			&__top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;

				&__line {
					width: 7rpx;
					height: 28rpx;
					background: #3262FD;
					margin-right: 10rpx;
				}

				&__ti {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #161B1F;
					line-height: 36rpx;
				}

				&__icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 8rpx;
				}

				&__tip {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #161B1F;
					line-height: 36rpx;
				}
			}

			&__tabs {
				height: 83rpx;
				border-radius: 20rpx;
				border: 3rpx solid #F5F5F5;
				display: flex;
				align-items: center;
				overflow: hidden;
				margin-bottom: 7rpx;

				&__item {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #2C2C2C;
					line-height: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 83rpx;
					width: 50%;
					background-color: #fff;
				}

				.active {
					background-color: #F5F5F5;
				}
			}

			&__list {

				&__item {
					padding: 30rpx 0;
					display: flex;
					align-items: center;

					&__tx {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-right: 24rpx;
						background-color: #f5f5f5;
					}

					&__name {
						font-family: PingFang SC;
						font-weight: 800;
						font-size: 27rpx;
						color: #181818;
						line-height: 26rpx;
						margin-bottom: 18rpx;
					}

					&__time {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #616161;
						line-height: 18rpx;
						opacity: 0.8;
					}

					&__price {
						display: flex;
						align-items: center;
						font-family: DIN Next LT Pro;
						font-weight: bold;
						font-size: 34rpx;
						color: #DE4E4A;
						line-height: 24rpx;

						&__icon {
							width: 17rpx;
							height: 18rpx;
							margin-right: 6rpx;
						}
					}
				}
			}
		}
	}
</style>